var current = 0;
function createButton() {

    var ul = document.createElement("ul");
    ul.className = "buttons";
    var div = document.getElementsByClassName("ppt_html_div")[0];
    div.appendChild(ul);//将ul添加到元素div最后面
    for (var i = 1; i <= 3; i++) {
        var li = document.createElement("li");//创建li
        var text = document.createTextNode(i)//创建文本节点
        li.className = "button";
        li.appendChild(text);//给li指定文本
        ul.appendChild(li);//将li添加到ul

    }
}
window.onload = function () {

    createButton();
    var images=document.getElementsByClassName("image_list")[0];
    images.style.top="0px";
    autoplay();
    var buttons = this.document.getElementsByClassName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].index = i;
        buttons[i].onclick = function () {
            goto(this.index)

        };
    }
    //鼠标进入事件
    images.onmouseenter=function(){
      if(handler2){
        clearInterval(handler2);
      }
    }
    images.onmouseleave=function(){
      autoplay();
    }
}
//自动播放
var handler2;
function autoplay() {
    handler2 = setInterval(function () {
        goto(current);
        current++;
        if (current == 3) {
            current = 0;
        }
    }, 4000)
}

function changeRack(index) {
    var buttons = document.getElementsByClassName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].style.background = "yellow";
        buttons[index].style.background = "red";
    }
}


//跳转值n张图片
var handler;
function goto(index) {
    changeRack(index);
    if (handler2) {
        clearInterval(handler2);
    }

    if (handler) {
        clearInterval(handler);
    }
    var images = document.getElementsByClassName("image_list")[0];
    //images.getAttribute("style","top:"+(0-index)*210+"px");
    //images.style.top=(0-index*210)+"px";
    //获取当前位置
    //计算目标位置
    //目标位置，当前位置
    var current_pos = parseInt(images.style.top);

    var dist_pos = 0 - index * 270;

    var dist = dist_pos - current_pos;

    var step_distince = dist / 120;
    var i = 0;
    handler = setInterval(function () {
        var current_pos = parseInt(images.style.top);
        distance = current_pos + step_distince;
        images.style.top = distance + "px";
        i++;
        if (i == 120) {
            images.style.top = dist_pos + "px";
            clearInterval(handler);
        }


    }, 2000 / 120);
  autoplay();
}

